<template>
  <header>
    <!-- 三则运算判断vuex里面user是否为空，不为空显示·欢迎+用户名· -->
    <div style="width:100px">{{ $store.state.user ? "欢迎：" + $store.state.user : "" }}</div>
    <!-- user是否为空来控制标题显示 -->
    <div>{{ $store.state.user ? '许愿墙' : "登录" }}</div>
    <div style="width:100px"></div>
    <!-- 多写一个div保持标题居中 -->
  </header>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
header {
  width: 100%;
  height: 50px;
  background-color: aquamarine;
  display: flex;
  align-items: center;
  padding: 0 20px;
  justify-content: space-between;
}
</style>
